<template>
  <div>
    <el-form ref="memberRef" :model="searchForm" label-position="right" :inline="true" size="small" label-width="80px">
      <el-form-item label="子卡名称:">
        <el-input v-model="searchForm.memberName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="子卡状态:">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话:">
        <el-input v-model="searchForm.phoneNum" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="车牌:">
        <el-input v-model="searchForm.carNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['cmp:card:add']"
          @click="handleAdd">开卡</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-menu" size="mini" v-hasPermi="['cmp:card:add']"
          @click="handleBatchAdd">批量开卡</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-s-unfold" size="mini" v-hasPermi="['cmp:card:transfer']"
          @click="handleBatchTransfer">批量转账</el-button>
      </el-col>
    </el-row>
    <div class="margin-top-21">
      <el-table v-loading="loading" :data="memberList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="checkbox" width="50" align="center" /> -->
        <el-table-column label="子卡名称" align="left" prop="memberName" />
        <el-table-column label="联系电话" align="left" prop="phoneNum" />
        <el-table-column label="子卡状态" align="center" prop="status">
          <template slot-scope="scope">
            <span class="status-dot"
              :class="scope.row.status === 'normal' ? 'normal' : scope.row.status === 'freeze' ? 'danger' : 'abnormal'"></span>
            <span>{{ scope.row.status === 'normal' ? '正常' : scope.row.status === 'freeze' ? '冻结' : '注销'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实体卡号" align="center" prop="card" />
        <el-table-column label="账户余额" align="center" prop="amt" />
        <el-table-column label="电话" align="center" prop="phoneNum" />
        <el-table-column label="车牌" align="center" prop="carNo" />
        <el-table-column label="开卡时间" align="center" prop="createTime" width="155" />
        <el-table-column label="操作" align="center" width="240">
          <template slot-scope="scope">
            <div v-hasPermi="['cmp:card:edit']">
              <el-button type="text" @click="handleModify(scope.row)" v-if="scope.row.status!='invalid'">修改</el-button>
              <el-button type="text" v-if="scope.row.status!='invalid'"
                @click="changeStatus(scope.row)">{{ scope.row.status === 'normal' ? '冻结' : '开启' }}</el-button>
            </div>
            <el-button type="text" @click="optionFn('refCashFlow', scope.row)">资金流水</el-button>
            <el-button type="text" @click="optionFn('refFuelRecord', scope.row)">加油记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
        @pagination="getList" />
    </div>
    <!-- 添加子账户 -->
    <addSubCard ref="refAddSubCard" @on-success="getList" />
    <!-- 批量开卡 -->
    <batchCardIssue ref="refCardIssue" @on-success="getList" />
    <!-- 批量转账 -->
    <batchTransfer ref="refBatchTransfer" @on-success="getList" />
    <!-- 资金流水 -->
    <cashFlow ref="refCashFlow" />
    <!-- 加油记录 -->
    <fuelRecords ref="refFuelRecord" />
  </div>
</template>

<script>
  import {
    sub_card,
    updateStatus
  } from '@/api/fleet'
  import {
    deepClone
  } from '@/utils';
  import addSubCard from './compnents/company/addSubCard.vue'
  import batchTransfer from './compnents/company/batchTransfer.vue'
  import batchCardIssue from './compnents/company/batchCardIssue.vue'
  import cashFlow from './compnents/cashFlow.vue'
  import fuelRecords from './compnents/fuelRecords.vue'
  import searchPanel from './../components/searchPanel/index.vue'

  export default {
    name: 'member',
    components: {
      cashFlow,
      fuelRecords,
      searchPanel,
      batchCardIssue,
      batchTransfer,
      addSubCard
    },
    data() {
      return {
        searchForm: {
          pageNum: 1,
          pageSize: 10,
          memberType: 'sub',
          stationName: '',
          stationId: ''
        },
        statusOptions: [{
            label: '正常',
            value: 'normal'
          },
          {
            label: '冻结',
            value: 'freeze'
          },
          {
            label: '注销',
            value: 'invalid'
          }
        ],
        stationOptions: [],
        companyOptions: [],
        checkAll: false,
        isIndeterminate: true,
        checkStations: [],
        memberList: [],
        total: 0,
        loading: false,
        companyId: ''
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkStations = val ? this.stationOptions : [];
        this.isIndeterminate = false;
        if (val) {
          this.searchForm.stationName = this.stationOptions.map(item => item.label).join(',');
          this.searchForm.stationId = this.stationOptions.map(item => item.value).join(',')
        } else {
          this.searchForm.stationName = '';
          this.searchForm.stationId = ''
        }
      },
      handleCheckedStationsChange(value) {
        // console.log(value, '1')
        let checkedCount = value.length;
        this.searchForm.stationName = value.map(item => item.label).join(',');
        this.searchForm.stationId = value.map(item => item.value).join(',')
        this.checkAll = checkedCount === this.stationOptions.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.stationOptions.length;
      },
      searchFn() {
        this.getList()
      },
      reset() {
        this.searchForm = {
          pageNum: 1,
          pageSize: 10,
          //memberType: 'normal'
        };
        this.getList()
      },
      getList() {
        this.loading = true;
        try {
          this.searchForm.memberType = 'sub'
          sub_card(this.searchForm).then(res => {
            if (res.code === 200) {
              this.memberList = res.data.rows;
              this.total = parseInt(res.data.total);
            }
          });
        } catch (error) {
          this.loading = false;
        } finally {
          this.loading = false;
        }
      },
      handleSelectionChange() {},
      optionFn(refName, row) {
        const model = {
          memberId: row.memberId
        }
        this.$refs[refName].open(model)
      },
      handleModify(row) {
        const model = deepClone(row);
        model.fuelStations = model.isAllFuel === 0 ? model.fuelStation.split(',') : []
        this.$refs.refAddSubCard.open(model)
      },
      handleAdd() {
        this.$refs.refAddSubCard.open()
      },
      handleBatchAdd() {
        this.$refs['refCardIssue'].open()
      },
      handleBatchTransfer(row) {
        let model = {
          companyId: row.companyId,
          companyName: row.companyName
        }
        this.$refs['refBatchTransfer'].open(model)
      },
      changeStatus(row) {
        const message = row.status === 'normal' ? '确定要冻结吗？' : '确定要恢复正常吗？'
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          updateStatus({
            groupId: row.groupId,
            memberId: row.memberId,
            status: row.status === 'normal' ? 'freeze' : 'normal'
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.getList()
            }
          })
        })
      }
    }
  }
</script>

<style>

</style>
